<template>
    <div>
        <myhead></myhead>
        <div class="per">
            <div class="left">
                <div class="title">用户:11395</div>
                <div class="pernav">
                    <el-col :span="2">
                        <el-menu
                            :default-active="this.$route.path"
                            router
                            mode="horizontal"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            style="text-align:center"
                        >
                            <el-menu-item
                                v-for="(item, i) in navList"
                                :key="i"
                                :index="item.name"
                                style="width:210px;"
                            >
                                <template slot="title">
                                    <i class="el-icon-s-platform"></i>
                                    <span> {{ item.navItem }}</span>
                                </template>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </div>
            </div>
            <div class="right">
                <div>
                    <router-view></router-view>
                </div>
            </div>
        </div>
        <foot></foot>
    </div>
</template>
<script>
import myhead from "../components/myhead";
import foot from "../components/foot";
import personal from "../components/personalinfo";
export default {
    data() {
        return {
            u1: "",
            navList: [
                { name: "/personal/personalinfo", navItem: "账号资料" },
                { name: "/personal/myorder", navItem: "我的订单" },
                { name: "/personal/mygoods", navItem: "我的商品" },
            ],
        };
    },
    components: {
        myhead,
        foot,
        personal,
    },
};
</script>
<style lang="scss" scoped>
.per {
    width: 100%;
    height: 100%;
    min-height: 670px;
    padding-top: 40px;
    background-color: rgb(237, 237, 237);
    clear: both;
}
.left {
    width: 210px;
    height: 544px;
    float: left;

    margin-left: 150px;
    text-align: center;
    .title {
        margin-top: 100px;

        font-size: 30px;
    }
    .pernav {
        margin-top: 90px;
    }
}
.right {
    width: 990px;
    height: 544px;
    float: left;
    position: absolute;
    margin-left: 360px;
    border-radius: 6px;
}
</style>
